<template>
    <!--确认支付-->
    <div>
        <div class="container text-left">
            <div class="main-title">
                <div class="head-logo" style="margin-top: -16px">
                    <a href="#" class="mfw-logo" title="蜂寻自由行"></a>
                </div>
                <span class="split" style="margin-left: -20px"></span>
                <span class="sub">收银台</span>
            </div>
            <!--提交成功-->
            <div class="message">
                <h3>
                    <i class="i-success"></i>您的订单提交成功！
                    <!--暂时不实现此功能-->
                    <!--<span class="countdown">支付剩余时间：
                        <span class="_j_expire_time" data-time="1776"><em>00</em>小时<em>29</em>分<em>36</em>秒</span>，超时则订单关闭
                    </span>-->
                </h3>
                <div class="item clearfix">
                    <span class="label">订单号：</span>
                    <span class="num">{{hotelOrder.orderNo}}</span>
                </div>
            </div>

            <!--应付金额-->
            <div class="message _j_split_container">
                <div class="item clearfix">
                    <span class="label">应付金额：</span>
                    <span class="price"><em>￥</em>{{hotelOrder.price}}</span>
                </div>
            </div>

            <div class="cashier-wrapper">
                <div class="hotel-info" style="width: 1000px">
                    <!--酒店地址-->
                    <div class="hd">
                        <i></i>
                        <h2>成都钓鱼台精品酒店(Diaoyutai Boutique Hotel Chengdu)</h2>
                        <p>地址：宽巷子38-39号 No.38-39 Kuan Alley, Qingyang District,Sichuan,Chengdu,China</p>
                    </div>

                    <!--入住信息-->
                    <div class="bd clearfix">
                        <ul>
                            <li><span class="label">入住时间：</span><span class="txt-red">2020年12月17日 星期四</span></li>
                            <li><span class="label">退房时间：</span><span class="txt-red">2020年12月18日 星期五</span></li>
                            <li><span class="label">房型：</span>豪华双床房</li>
                            <li><span class="label">房间数量：</span>1间</li>
                            <li><span class="label">入住人数：</span>共2成人</li>
                            <li><span class="label">入住人：</span>{{hotelOrder.name}}</li>
                            <li><span class="label">床型：</span>2张单人床X1</li>
                        </ul>

                        <ul>

                            <li><span class="label">手机：</span>{{hotelOrder.list.phone}}</li>
                            <li><span class="label">邮箱：</span>{{hotelOrder.list.email}}</li>
                        </ul>
                    </div>
                    <div class="notice">
                        <p>取消政策：
                            此房价预订后酒店不接受取消或变更的请求。

                        </p>
                    </div>
                    <div class="notice">
                        <p>特别提示：
                            此订单由代理商开具增值税普通发票，如需发票，请联系蜂寻客服，客服电话：4006345678
                        </p>
                    </div>
                </div>
            </div>

            <div class="payment">
                <div class="hd">支付方式</div>
                <div class="bd" id="paycorelist">
                    <div class="item">
                        <a class="_j_choose_pay on" href="javascript:void(0);" data-platform="alipay">
                            <span class="checkbox-icon"><i></i><input type="checkbox"></span>

                            <span class="logo-weixin"></span>
                        </a>
                    </div>
                    <div class="item">
                        <a class="_j_choose_pay " href="javascript:void(0);" data-platform="weixin">
                            <span class="checkbox-icon"><i></i><input type="checkbox"></span>
                            <span class="logo-alipay"></span>
                        </a>
                    </div>
                    <div class="item">
                        <a class="_j_choose_pay " href="javascript:void(0);" data-platform="jd">
                            <span class="checkbox-icon"><i></i><input type="checkbox"></span>
                            <span class="jdpay"><i></i>京东支付</span>
                        </a>
                    </div>

                    <div class="item">
                        <a class="_j_choose_pay" href="javascript:void(0);" data-platform="antcrpay">
                            <span class="checkbox-icon"><i></i><input type="checkbox"></span>
                            <span class="hb-logo">
                                <i>
                                    <span style="display: none" class="top-arrow"></span>
                                </i>花呗分期
                            </span>
                        </a>
                    </div>
                    <div class="item">
                        <a class="_j_choose_pay " href="javascript:void(0);" data-platform="sfy">
                            <span class="checkbox-icon"><i></i><input type="checkbox"></span>
                            <span class="logo-amortize"><i></i>旅游分期</span>
                        </a>
                    </div>
                </div>
                <!--确认支付-->
                <div class="order-action">
                    <a class="btn" href="/optimization/WeChatPay" id="_j_pay_submit">确认支付</a>
                    <p>支付成功后，请注意接受短信和邮件。</p>
                </div>

            </div>

        </div>

    </div>
</template>

<script>
    export default {
        props: ["hotelOrder"],
        name: "Payment",
        mounted() {

        },methods:{
            submit:function () {
                // let data={""}
                // alert(this.hotelOrder.list.id);
                this.$axios.get(this.SEARCHS+'/Alipay/precreate/'+this.hotelOrder.list.id).then(function (res) {
                    alert(res.data['data'].codeUrl)
                })
                // this.$router.push({
                //     path:""
                // })
            }
        }
    }
</script>

<style scoped>
    .text-left{
        text-align: left;
        margin-top: 20px;
    }

    table {
        border-spacing: 0;
        border-collapse: collapse;
        width: 100%
    }

    .container {
        width: 1000px;
        margin: 0 auto
    }

    .s-pull {
        float: right
    }

    .clearfix,
    .fm,
    .container {
        zoom: 1
    }

    .clearfix:after,
    .fm:after,
    .container:after {
        content: '';
        clear: both;
        display: table;
        height: 0;
        overflow: hidden
    }

    .mb10 {
        margin-bottom: 10px
    }

    .fm {
        margin-bottom: 10px
    }

    .container {
        margin-top: 30px;
        margin-bottom: 40px
    }

    .hotel-info {
        margin: 20px 0;
        padding: 10px;
        border-top: 1px dashed #e5e5e5;
        border-bottom: 1px dashed #e5e5e5
    }

    .hotel-info .txt-red {
        color: red
    }

    .hotel-info .hd {
        margin: 15px 0 40px;
        padding-left: 38px
    }

    .hotel-info .hd i {
        float: left;
        margin: 7px 0 0 -38px;
        width: 28px;
        height: 33px;
        display: inline-block;
        background: url(../../assets/introduction-images/sprite_v35.png) -96px -654px no-repeat;
        background-size: auto;
        vertical-align: middle
    }

    .hotel-info .hd h2 {
        font-size: 20px;
        line-height: 28px;
        font-weight: normal
    }

    .hotel-info .hd p {
        color: #999
    }

    .hotel-info ul {
        line-height: 20px;
        float: left;
        width: 330px;
        padding-right: 30px;
        border-right: 1px solid #e5e5e5
    }

    .hotel-info ul+ul {
        margin-left: -1px;
        padding-left: 120px;
        border-left: 1px solid #e5e5e5;
        border-right: none;
        padding-right: 0
    }

    .hotel-info li {
        margin: 10px 0;
        padding-left: 70px
    }

    .hotel-info li .label {
        float: left;
        margin: 0 0 0 -70px
    }

    .hotel-info .notice {
        margin: 15px 0 10px
    }
</style>